<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>内存泄漏演示</title>
    <style>
        .container {
            margin: 20px;
        }

        button {
            margin: 5px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>内存泄漏演示</h2>

        <div>
            <button id="createData">创建大量全局数据</button>
        </div>

        <!-- 内存使用显示 -->
        <div>
            <p>已分配内存: <span id="memoryUsage">0</span> MB</p>
        </div>
    </div>

    <script>
        // 全局变量存储泄漏的数据
        let leakedData = [];

        document.getElementById('createData').addEventListener('click', () => {
            for (let i = 0; i < 10; i++) {
                const hugeData = new Array(50000).fill('闭包数据' + Math.random());
                leakedData.push(hugeData);
            }
        });

        // 显示内存使用情况
        setInterval(() => {
            if (window.performance && window.performance.memory) {
                const memoryUsage = Math.round(window.performance.memory.usedJSHeapSize / (1024 * 1024));
                document.getElementById('memoryUsage').textContent = memoryUsage;
            }
        }, 600);
    </script>
</body>

</html>